<form action="index.php" method="post" name="adminForm">
<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jquery.history.js"></script>
<script type="text/javascript" src="<?= JURI::base(true) ?>/media/system/js/jquery.opacityrollover.js"></script>
<link rel="stylesheet" href="<?= JURI::base(true) ?>/media/system/css/gallerific/basic.css" type="text/css" />
<link rel="stylesheet" href="<?= JURI::base(true) ?>/media/system/css/gallerific/black.css" type="text/css" />
<link rel="stylesheet" href="<?= JURI::base(true) ?>/media/system/css/gallerific/galleriffic-2.css" type="text/css" />

<!--script type="text/javascript" src="/media/system/js/jquery.prettyPhoto.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="/media/system/css/prettyPhoto/prettyPhoto.css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /-->

<script type="text/javascript">
  jQuery(document).ready(
    function(){
	  create_scrollable('#week_list', 20, '#week_<?= $this->current_week ?>', 'Week');
	  jQuery('#week_list li').first().css('margin','0px 5px 0px -5px');
	  
      //jQuery("a[rel^='prettyPhoto']").prettyPhoto();
      
      jQuery('div.navigation').css({'width' : '300px', 'float' : 'left'});
      jQuery('div.content').css('display', 'block');

      // Initially set opacity on thumbs and add
      var onMouseOutOpacity = 0.67;
      jQuery('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
      });

      var gallery = jQuery('#thumbs').galleriffic({
        delay:                     2500,
          numThumbs:                 15,
          preloadAhead:              10,
          enableTopPager:            true,
          enableBottomPager:         true,
          maxPagesToShow:            7,
          imageContainerSel:         '#slideshow',
          controlsContainerSel:      '#controls',
          captionContainerSel:       '#caption',
          loadingContainerSel:       '#loading',
          renderSSControls:          true,
          renderNavControls:         true,
          playLinkText:              'Play Slideshow',
          pauseLinkText:             'Pause Slideshow',
          prevLinkText:              '&lsaquo; Previous',
          nextLinkText:              'Next &rsaquo;',
          nextPageLinkText:          'Next &rsaquo;',
          prevPageLinkText:          '&lsaquo; Prev',
          enableHistory:             false,
          autoStart:                 false,
          syncTransitions:           true,
          defaultTransitionDuration: 900,
          onSlideChange:             function(prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find('ul.thumbs').children()
              .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
              .eq(nextIndex).fadeTo('fast', 1.0);
          },
          onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
          },
          onPageTransitionIn:        function() {
            this.fadeTo('fast', 1.0);
          }
      });
    }
  );
</script>

<div id="tabs" style="padding-top: 10px; padding-left:0px;">
  <ul id="week_list">
  
<?  if(!empty($this->weeks)):
      foreach(array_keys($this->weeks) as $index): ?>
        <li id="week_<?= $index ?>">
          <a href="<?= JRoute::_('index.php?option=com_pbny&controller=photos&task=display&id='.$index) ?>" ><?= ($index+1) ?></a>
        </li>
<?    endforeach; 
    endif; ?>
	
  </ul>
</div>  

<div id="page">
  <div id="container">
    
    <div id="gallery" class="content">
      <div id="controls" class="controls"></div>
      <div class="slideshow-container">
        <div id="loading" class="loader"></div>
        <div id="slideshow" class="slideshow"></div>
      </div>

      <div id="caption" class="caption-container"></div>
    </div>

    <div id="thumbs" class="navigation">
      <ul class="thumbs noscript">
      <?   $pics = array();
        if(isset($this->pics))
          $pics = $this->pics;
          
        foreach($pics as $pic):?>
          <li>
            <a class="thumb" href="<?= PBNYHelper::getFlickrImageUrl($pic->flickr_id, 'medium') ?>" width="500px" height="500px" alt="<?= $pic->type_instance ?>" title="Title #0">
              <img src="<?= PBNYHelper::getFlickrImageUrl($pic->flickr_id, 'thumbnail') ?>" width="80px" height="80px" alt="<?= $pic->type_instance ?>" alt="Title #0" />
            </a>
            <div class="caption">
              <div class="download">
                <a href="<?= $pic->pic ?>">Download</a>
              </div>
              <div class="image-title"><?= $pic->title ?></div>
              <div class="image-desc"><?= $pic->description ?></div>
            </div>

            <!--a href="<?= $pic->pic ?>" title="<?= $pic->description ?>" rel="prettyPhoto[pp_gal]">
              <img src="" />
            </a-->
          </li>
      <?  endforeach; ?>
      </ul>
    </div>
    <div style="clear: both;"></div>
  </div>
</div>
  
</form>
